/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/
import { AmcaxForm, BaseCommand, CommandDialog, MathTool } from '@amcax/base';
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
import i18n from 'i18next';
import { useEffect, useRef, useState } from 'react';
import CmdInteractor from './CmdInteractor';
import { CircleRelation, Constraint, ExtrudeDialogProps } from './types';
import { NumberInputFormat } from '@app-base/common/components/command-form/constants';

const POLYGON_LINE_COUNT = 'polygonLineCount';

function MultipleLine({ title, onClose }: ExtrudeDialogProps) {
  const cmdRef = useRef<CmdInteractor>(null);
  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  // 添加约束
  const [constraint, setConstraint] = useState<Constraint>({
    edgeCount: parseInt(sessionStorage.getItem(POLYGON_LINE_COUNT) || '5'),
    // 内切圆和外切圆
    circleRelation: CircleRelation.inscribedCircle,
  });
  useEffect(() => {
    cmdRef.current = new CmdInteractor();
    cmdRef.current.addExit(onClose);
    cmdRef.current.constraint = MathTool.deepClone(constraint);
    // exit
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  }, []);

  const onChange = (data) => {
    data.formData.edgeCount &&
      sessionStorage.setItem(
        POLYGON_LINE_COUNT,
        JSON.stringify(data.formData.edgeCount),
      );
    setConstraint((state) => {
      const params = {
        ...state,
        ...data.formData,
        edgeCount: data.formData?.edgeCount < 3 ? 3 : data.formData.edgeCount,
      };
      cmdRef.current.constraint = MathTool.deepClone(params);
      return params;
    });
  };

  const schema: RJSFSchema = {
    type: 'object',
    properties: {
      edgeCount: {
        type: 'number',
        title: '边数',
        default: 5,
        minimum: 3,
        format: NumberInputFormat.Integer,
      },
      circleRelation: {
        type: 'number',
        title: '类型',
        oneOf: [
          { title: '内切圆', const: CircleRelation.inscribedCircle },
          { title: '外接圆', const: CircleRelation.circumscribedCircle },
        ],
        default: CircleRelation.inscribedCircle,
      },
    },
  };

  const uiSchema: UiSchema = {
    circleRelation: {
      'ui:widget': 'radio',
    },
    'ui:options': {
      classNames: 'cmd-sketch-form',
      submitButtonOptions: {
        norender: true,
      },
    },
  };

  return (
    // <></>
    <CommandDialog
      title={title}
      onClose={onClose}
      className='sketchDialog'
      placement='topLeft'
    >
      <AmcaxForm
        formContext={formItemLayout}
        schema={schema}
        uiSchema={uiSchema}
        validator={validator}
        onChange={onChange}
        formData={{
          edgeCount: constraint.edgeCount,
          circleRelation: constraint.circleRelation,
        }}
      />
    </CommandDialog>
  );
}

export const cmdMultipleLine: BaseCommand = {
  id: 'CmdMultipleLine',
  label: 'command.polygon',
  icon: 'commands/sketch/polygon',
  group: 'sketch',
  create: (label: string, onClose: () => void) => (
    <MultipleLine
      title={i18n.t(label)}
      onClose={onClose}
    />
  ),
};
